<template>
  <div id="detail">
    <div id="top_box">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="7">
            <div class="block">
              <span class="demonstration">类目:  </span>
              <el-cascader
                v-model="value"
                :options="options_data"
                :props="props"
                :filterable="true"
                :style="width"
                collapse-tags
                @change="handleChange"
              />
            </div>
          </el-col>
          <el-col :span="9 ">
            <span class="title_span">考评时间：</span>
            <el-date-picker
              v-model="chose_date"
              type="daterange"
              format="yyyy年M月d日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="pick_date"
            />
            <i class="el-icon-warning-outline" title="时间周期从开始时间的0点至结束时间的24点" style="margin-left: 10px;font-size: 16px;color: #606266;" />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="danger" icon="el-icon-download" @click="download">导出</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div id="table_box">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="60"
        />
        <el-table-column
          prop="realName"
          label="教师姓名"
        />
        <el-table-column
          prop="catalog_name"
          label="大类"
        />
        <el-table-column
          prop="son_catalog_name"
          label="细类"
        />
        <el-table-column
          prop="grade_item"
          label="项目"
        />
        <el-table-column
          prop="opt_flg"
          label="分项"
        />
        <el-table-column
          prop="count"
          label="次数"
        />
        <el-table-column
          prop="sum"
          label="求和"
        >
          <template slot-scope="scope">
            {{ scope.row.opt_flg + scope.row.sum / 100 }}分
          </template>
        </el-table-column>
        <el-table-column
          prop="avg"
          label="平均分"
        >
          <template slot-scope="scope">
            {{ scope.row.opt_flg + scope.row.avg / 100 }}分
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        :current-page="search_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="search_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="search_params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { selectItem, deleteItem, selectOption } from '@/api/singleoutput'
export default {
  data() {
    return {
      // 多级菜单使用
      value: [],
      options_data: [],
      props: { checkStrictly: true },
      options_params: {
        'nothing': 'nothing'
      },
      // 其他使用
      chose_date: [],
      tableData: [],
      search_params: {
        pid: 0,
        sid: 0,
        item: 0,
        pageNum: 1,
        pageSize: 20,
        total: 100,
        start_time: '2020-04-22',
        end_time: '2020-04-23'
      }
    }
  },
  created() {
    this.setDate()
    this.selectOption()
    this.selectItem()
  },
  methods: {
    handleSizeChange(val) {
      this.search_params.pageSize = val
      this.search_params.pageNum = 1
      this.selectItem()
    },
    download() {
      // eslint-disable-next-line eqeqeq
      this.value[0] = this.value[0] == undefined ? '' : this.value[0]
      // eslint-disable-next-line eqeqeq
      this.value[1] = this.value[1] == undefined ? '' : this.value[1]
      // eslint-disable-next-line eqeqeq
      this.value[2] = this.value[2] == undefined ? '' : this.value[2]

      window.location.href = process.env.VUE_APP_BASE_API + '/SingleOutput/selectItemExcel?' +
                    'start_time=' + this.search_params.start_time +
                    '&end_time=' + this.search_params.end_time +
                    '&pid=' + this.value[0] +
                    '&sid=' + this.value[1] +
                    '&item=' + this.value[2] +
                    '&token=' + window.sessionStorage.getItem('token')
    },
    handleChange(value) {
      this.search_params.pid = this.value[0]
      this.search_params.sid = this.value[1]
      this.search_params.item = this.value[2]
      // console.log(value)
    },
    handleCurrentChange(val) {
      this.search_params.pageNum = val
      this.selectItem()
    },
    pick_date(arr) {
      if (arr != null) {
        this.search_params.start_time = arr[0]
        this.search_params.end_time = arr[1]
      }
    },
    search() {
      this.selectItem()
    },
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteItem({ id: row.id }).then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.code != '200') {
            this.$message({
              message: res.msg,
              type: 'warning'
            })
          } else {
            this.selectItem()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }).catch(() => {

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    selectItem() {
      selectItem(this.search_params).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.code != '200') {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        } else {
          this.tableData = res.data.records
          this.search_params.total = res.data.total
        }
      }).catch(() => {

      })
    },
    selectOption() {
      selectOption(this.options_params).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.code != '200') {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        } else {
          this.options_data = res.data
        }
      }).catch(() => {

      })
    },
    setDate() {
      var start = new Date()
      var date = new Date()
      var day = date.getDay()
      switch (day) {
        case 0:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
          break
        case 1:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 0)
          break
        case 2:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
          break
        case 3:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
          break
        case 4:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
          break
        case 5:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 4)
          break
        case 6:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 5)
          break
      }
      this.chose_date[0] = start.getFullYear() + '-' + this.add0(start.getMonth() + 1) + '-' + this.add0(start.getDate())
      this.chose_date[1] = date.getFullYear() + '-' + this.add0(date.getMonth() + 1) + '-' + this.add0(date.getDate())
      this.search_params.start_time = start.getFullYear() + '-' + this.add0(start.getMonth() + 1) + '-' + this.add0(start.getDate())
      this.search_params.end_time = date.getFullYear() + '-' + this.add0(date.getMonth() + 1) + '-' + this.add0(date.getDate())
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    }
  }
}
</script>
<style lang="scss">
  #detail {
    #top_box {
      margin: 10px 20px 10px 20px;
      .title_span {
        font-size: 14px;
        color: #606266;
      }
    }
    #table_box {
      margin: 10px 20px 10px 20px;
    }
    #page_box {
      text-align: center;
    }
  }
</style>
